<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .kuang{text-align: center;margin-top:200px;}
        #mess{text-align: center}
        #mess2{text-align: center;margin-top:10px;}
        .value{width: 200px;height:200px;border:1px solid;text-align: center;line-height: 200px;display: inline-block;}
    </style>
    <script src="https://cdn.jsdelivr.net/gh/emn178/js-md5/build/md5.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>
    <script src="encryption.js"></script>   
    <script src="reconnecting-websocket.min.js"></script> 
</head>
<body>
    <div id="mess">正在连接...</div>
	<div><textarea rows="10" cols="100" id="code"></textarea></div>
    <div class="kuang">
        <div class="value" id="value1">获取资源列表</div>
		<div class="value" id="value2">获取资源内容</div>
		<div class="value" id="value3">更新资源内容</div>
    </div>
    <script>
        var mess = document.getElementById("mess");

        var keepalivetimer;
        var ws;
        
        if(window.WebSocket){
            ws = new ReconnectingWebSocket('ws://127.0.0.1:1884',null,{reconnectInterval:2000});

            ws.onopen = function(e){
                console.log("连接服务器成功");
                mess.innerHTML = "连接成功" ;  
               
                keepalivetimer = setInterval( function(){keepalive(ws)},1000);
            }
            ws.onclose = function(e){
                console.log("服务器关闭");
                mess.innerHTML = "服务器关闭";
                clearInterval(keepalivetimer);
            }
            ws.onerror = function(){
                console.log("连接出错");
                mess.innerHTML = "连接出错";
                clearInterval(keepalivetimer);
            }

            ws.onmessage = function(e){
                var obj = null;
				
                // 解密后再解析
                try {
                    obj = JSON.parse(e.data);
                }
                catch(exception){
                    console.log(exception.message);
                }

                console.log(JSON.stringify(obj)); 

                if(obj.mesid == 1003) {
					console.log(Base64.decode(obj.content));
					document.getElementById('code').innerText=Base64.decode(obj.content);
                }                                                                          
            }
        }
        
        document.querySelector("#value1").onclick = function(e){
            
            var senddata = {};
            senddata.mesid = 1002;

            let strbytes = JSON.stringify(senddata);     

            ws.send(strbytes);
        }   

        document.querySelector("#value2").onclick = function(e){
            
            var senddata = {};
            senddata.mesid = 1003;
			senddata.filepath = "/main.js";

            let strbytes = JSON.stringify(senddata);     

            ws.send(strbytes);
        } 

        document.querySelector("#value3").onclick = function(e){
            
			var content = Base64.encode(document.getElementById('code').value);
			console.log(content);
			
			var arr = [];
			arr[0] = {"filepath":"/main.js","opertype":0,"content":content};
			
            var senddata = {};
            senddata.mesid = 1001;
			senddata.files = arr;

            let strbytes = JSON.stringify(senddata);     

            ws.send(strbytes);
        }  	 		
        
        function keepalive(ws) {
              ws.send('heart');
        }
    </script>
</body>
</html>